<template>
  <div class="avue-crud avue-crud--card">
    <div class="el-card is-never-shadow avue-crud__search">
      <div class="el-card__body" v-if="flag == false">
        <div class="avue-form" style="width: 100%;">
          <el-form>
            <div class="el-row" span="24">
              <div class="avue-group avue-group--header" index="0" active="1">
                <div role="tablist" aria-multiselectable="true" class="el-collapse">
                  <div role="tabpanel" aria-labelledby="el-collapse-head-5030" id="el-collapse-content-5030" class="el-collapse-item__wrap">
                    <div class="el-collapse-item__content">
                      <div class="avue-form__group avue-form__group--flex">
                        <el-form-item label="用户昵称:" >
                          <el-input v-model="user" placeholder="请选择用户昵称"></el-input>
                        </el-form-item>
                         <el-form-item label="状态:">
                            <el-select v-model="b" placeholder="请选择状态">
                              <el-option label="禁用" value="0"></el-option>
                              <el-option label="正常" value="1"></el-option>
                            </el-select>
                          </el-form-item>
                          <div class="el-form-item__content" style="margin-left: 0px;text-align: center;">
                            <el-button @click="bt1" type="primary" style="padding: 7px 15px;font-size: 12px;" icon="el-icon-search">搜索</el-button>
                            <el-button @click="bt2" type="primary" style="padding: 7px 15px;font-size: 12px;" icon="el-icon-delete">清空</el-button>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="el-card is-never-shadow">
        <div class="el-card__body">
          <div class="avue-crud__menu">
            <div class="avue-crud__left">
            </div>
            <div class="avue-crud__right">
              <el-button @click="jdk1" style="padding: 9px;" icon="el-icon-refresh" circle></el-button>
              <el-button @click="jdk2" style="padding: 9px;" icon="el-icon-search" circle></el-button>
            </div>
          </div>
          <!-- 表格 -->
          <el-form>
            <el-table ref="multipleTable" header-align="center" border :data="tableData" tooltip-effect="dark" style="width: 100%" >
              <el-table-column  label="用户昵称" prop="nickName" header-align="center"></el-table-column>
              <el-table-column label="用户头像"  header-align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.pic !=null"><img :src="scope.row.pic" alt="" style="width:40px;height:40px"></span>
                  <span v-else></span>
                </template>     
              </el-table-column>
              <el-table-column prop="status" label="状态"  header-align="center">
                <template slot-scope="scope">
                  <el-button type="primary" style="padding: 4px 8px;" disabled v-if="scope.row.status == 1" >正常</el-button>
                  <el-button type="danger" style="padding: 4px 8px;" disabled v-else>禁用</el-button>
                </template>
              </el-table-column>
              <el-table-column style="text-align:center" prop="modifyTime" label="注册时间" header-align="center"></el-table-column>
              <el-table-column prop="address" label="操作" show-overflow-tooltip header-align="center">
                  <template slot-scope="scope">
                    <el-button @click="one(scope.row,scope.$index)" type="primary" icon="el-icon-edit" style="padding: 9px 15px;">修改</el-button>
                  </template>
              </el-table-column>
            </el-table>
          </el-form>
          <!-- 分页器 -->
          <div class="avue-crud__pagination">
            <el-pagination background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40,50,100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 模态框 -->
          <el-dialog title="修改" :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
            <el-form>
              <el-form-item label="用户头像">
                <img :src="arr.pic" alt="" style="width: 40px;height: 40px;">
              </el-form-item>
              <el-form-item label="用户昵称">
                <el-input v-model="arr.nickName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="用户状态">
                <el-radio-group v-model="radio"  v-removeAriaHidden>
                    <el-radio  :label="0">禁用</el-radio>
                    <el-radio  :label="1">正常</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="pope1">取 消</el-button>
              <el-button type="primary" @click="pope2">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 用户昵称
      user:"",
      b:"",
      tableData:[],
      // 时间戳
      timestamp:Math.floor(Date.now() / 1000),
      // 分页器
      currentPage4:1,
      total:0,
      shu:1,
      ye:10,
      // 隐藏
      flag : false,
      // 模态框
      dialogVisible: false,
      // 单选
      radio: '1',
      arr:[],
      // 修改参数
      userId:""
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/user/page",{params:{
        t:this.timestamp,
        current:1,
        size:10
      }}).then((res)=>{
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 分页器 每页条数
    handleSizeChange(val){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/user/page",{params:{
        current:this.shu,
        size:val,
        t:this.template
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 分页器 当前页
    handleCurrentChange(val){
      this.shu = val-1
      this.$http.get("http://admin.yami.byesame.com/apis/admin/user/page",{params:{
        current:this.shu,
        size:this.ye,
        t:this.template
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 修改
    one(a,b){
      console.log(a,b);
      this.arr = a
      this.userId = a.userId
      this.radio = a.status
      console.log(this.arr,this.radio);
      this.dialogVisible = true
    },
    // 模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 模态框取消
    pope1(){
      this.dialogVisible = false
    },
    // 模态框确定
    pope2(){
      this.$http.put("http://admin.yami.byesame.com/apis/admin/user",{
        t:this.template,
        nickName:this.arr.nickName,
        status:this.radio,
        userId:this.userId
      }).then((res)=>{
        console.log(res);
        this.dialogVisible = false
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.getList()
      })
    },
    // 搜索
    bt1(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/user/page",{params:{
        t:this.template,
        current:1,
        size:10,
        nickName:this.user,
        status:this.b
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 清空
    bt2(){
      this.user = "",
      this.b = "",
      this.getList()
    },
    // 刷新
    jdk1(){
      this.getList()
    },
    // 隐藏
    jdk2(){
      if(this.flag == false){
        this.flag = true
      }else{
        this.flag = false
      }
    } 
  }
}
</script>

<style scoped>
.avue-crud {
  margin: 0 auto;
  width: 100%;
}
.el-card {
  background-color: #fff;
  color: #303133;
  transition: .3s;
}
.el-card, .el-message {
  border-radius: 4px;
  overflow: hidden;
}
.avue-crud--card .el-card__body {
  padding: 0;
}
.el-card__body {
  padding: 20px;
}
.avue-form {
  margin: 0 auto;
  box-sizing: border-box;
}
.avue-form, .avue-form__group .el-col {
  position: relative;
}
.el-row {
  box-sizing: border-box;
}
.avue-group {
  width: 100%;
}
.el-collapse {
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.avue-group .el-collapse, .avue-group .el-collapse-item__wrap {
  border-color: #fff;
}
.el-collapse-item__wrap {
  will-change: height;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid #ebeef5;
}
.avue-group .el-collapse-item__content, .avue-group .van-collapse-item__content {
  padding-bottom: 0;
}
.el-collapse-item__content {
  padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
  line-height: 1.769230769230769;
}
.avue-form__group--flex {
  display: flex;
}
.avue-form__group {
  align-items: flex-start;
  flex-wrap: wrap;
  height: auto;
}
>>>.el-form-item__label{
  width: 80px!important;
}
</style>